<template>
  <div class="tipCommon" :style="tipStyleClass">
    <div class="icon" :style="iconStyle"></div>
    <div class="msg" :style="msgStyleClass">{{tipMsg}}</div>
  </div>
</template>

<script>
  export default {
    props: {
      tipStyle: {},
      tipRank: {
        type: String,
        validator(val) {
          return ['info', 'warring', 'error'].indexOf(val) !== -1
        },
        default: 'info'
      },
      tipMsg: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        tipWidth: '308px',
        tipHeight: '30px',
      }
    },
    computed: {
      tipStyleClass() {
        let {tipStyle} = this.$props
        if (tipStyle === undefined) {
          tipStyle = {}
        }
        if (!tipStyle.hasOwnProperty('width')) {
          tipStyle['width'] = this.tipWidth
        }
        if (!tipStyle.hasOwnProperty('height')) {
          tipStyle['height'] = this.tipHeight
        }
        return tipStyle
      },
      iconStyle() {
        let {tipRank} = this.$props
        return {
          'background-image':
            'url(' + require('../../assets/images/' + tipRank + '.png') + ')'
        }
      },
      msgStyleClass() {
        let {tipRank} = this.$props
        let style = {}
        switch (tipRank) {
          case 'error':
            style['color'] = 'red'
            break;
          case 'info':
            style['color'] = 'rgba(0, 0, 0, 1)'
            break;
          case 'warring':
            style['color'] = 'yellow'
            break;
        }
        return style
      }
    }
  }
</script>

<style scoped>
  .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
  }

  .msg {
    display: inline-block;
    font-size: 18px;
    font-family: Adobe Heiti Std;
    font-weight: bolder;
    color: rgba(0, 0, 0, 1);
  }
</style>
